<script setup>
import {onMounted, reactive, ref} from 'vue'
import { ElMessage } from 'element-plus'
// 路由相关
// import { useRouter } from "vue-router";
// const router = useRouter() ;
import router from "@/router";
import request from "@/utils/request";
onMounted(()=>{
  //在setup中，用来加载页面时，查看账户密码是否存在
  if (localStorage.getItem("Form")!=null&&Object.keys(localStorage.getItem("Form")).length>2 ) {

    loginForm.checked = true;
    var userPwdInfo = JSON.parse(localStorage.getItem("Form"));

    loginForm.username=userPwdInfo.username;
    loginForm.password=userPwdInfo.password;

  } else {
    loginForm.checked = false;
  }
})
// 表单引用
const loginFormRef = ref()
// 表单的数据模型
const loginForm = reactive({
  username : '' ,
  password : '',
  checked: false,
  Form: {},
})
// 表单的校验规则
const loginRules = reactive({
  username: [
    { required: true, message: '必须填写账号', trigger: 'blur' },
    { min: 3, max:8, message: '账号长度为3-8', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '必须填写密码', trigger: 'blur' },
    /*{ min: 6, message: '账号长度至少8位', trigger: 'blur' },*/
    { pattern : /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/ ,
      message: '密码必须是数字和字母相结合，长度至少6位！',
      trigger: 'blur' },
  ],
})
const submitForm = () => {
  loginFormRef.value.validate((valid, fields) => {
    if (valid) {
      request({
        url:'/sys/user/login',
        method:'POST',
        params:loginForm,
      }).then(res=>{
        if (200==res.data.errorCode){
          sessionStorage.setItem('username', JSON.stringify(res.data.data))
          // 判断是否记住密码
          if (loginForm.checked) {
            localStorage.setItem("Form", JSON.stringify(loginForm));
          } else {
            localStorage.setItem("Form", JSON.stringify({}));
          }
          router.push('/main/home')
        }else {
          ElMessage({
            message: res.data.msg,
            type: 'error',
          })
        }
      })
    }
  })
}
const resetForm = () => {
  loginForm.username = ''
  loginForm.password = ''
  loginFormRef.value.resetFields()
}
</script>

<template>
  <div class="bg">
    <div class="content">
      <h2>交管平台对接信息化管理系统</h2>
      <h3>管理员登录</h3>
      <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          label-width="80px"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="loginForm.username" style="width: 450px" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password" >
          <el-input v-model="loginForm.password" style="width: 450px" type="password" autocomplete="off" show-password/>
        </el-form-item>
        <el-form-item style="margin-left: 130px">
        <el-button type="primary" @click="submitForm">登录</el-button>
        <el-button @click="resetForm">取消</el-button>
        </el-form-item>
        <!-- 记住密码 -->
        <el-form-item class="isChecked">
          <!-- `checked` 为 true 或 false -->
          <el-checkbox v-model="loginForm.checked" class="remeberPwd">记住密码</el-checkbox>
        </el-form-item>
        <div class="col">
          <el-row>
            <el-col :span="10" :offset="4">
                <router-link to="/register">注册账号</router-link>
            </el-col>
            <el-col :span="8">
              <router-link to="/forgetpassword">忘记密码</router-link>
            </el-col>
            <el-col :span="2"></el-col>
          </el-row>

        </div>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.bg {
  width: 100%;
  height: 100%;
  background-image: url("../assets/imgs/bgimg.jpg");
  background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
  position: absolute; /* 不可缺少 */
  z-index: -1;
  background-repeat: no-repeat;
}
.content {
  margin: 0 auto;
  width: 600px;
  height: 400px;
  margin-top: 200px;
  padding-top: 20px;
  border-radius: 20px;
  color: black;
  background: rgba(222,222,221,0.75);
}
</style>